<script setup>
import { ref, onMounted } from 'vue'
import { Modal, message } from 'ant-design-vue'
// import AnTv from './AnTv.vue'
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import addBill from '@/views/propety/addBill.vue'
import {
  getWorkbenchBaseInfo,
  getTempContractRemindList,
  getRentContractList
} from '@/api/staging and property/staging'
//    数据列表(园区数据、快接入口、年度输入统计)
let parkList = ref([])
const getlist = async () => {
  const { data } = await getWorkbenchBaseInfo()
  console.log(data)
  parkList.value = data
}

const showDialog = ref(false)

//    临时合同提醒列表
let dataSource = ref([])
const listForm = ref({
  page: 1,
  pageSize: 10
})
const total = ref(0)
const getSourceList = async (listForm) => {
  const { data } = await getTempContractRemindList(listForm)
  console.log(data)
  dataSource.value = data.rows
  total.value = data.total
  console.log(dataSource.value)
}
const onChange = (page, pageSize) => {
  listForm.value.page = page
  listForm.value.pageSize = pageSize
  getSourceList(listForm.value)
}
//    退租
const rentingOut = async (id) => {
  Modal.confirm({
    content: '退租不可撤回,是否确认退当前宇楼',
    async onOk() {
      try {
        const { code, msg } = await getRentContractList(id)
        if (code === 10000) {
          message.success(msg)
          getSourceList()
        }
      } catch (error) {
        message.error(error.response.data.msg)
      }
    }
  })
}
//   表格列
const columns = ref([
  { title: '序号', dataIndex: 'index', key: 'index' },
  { title: '企业名称', dataIndex: 'enterpriseName', key: 'name' },
  { title: '租赁楼宇', dataIndex: 'buildingName', key: 'description' },
  { title: '租赁时间', dataIndex: 'startTime', key: 'duration' },
  { title: '操作', dataIndex: 'action' }
])
//  挂载完调用
onMounted(() => {
  getlist()
  getSourceList()
})
</script>

<template>
  <div class="content">
    <div class="t-content">
      <div class="parkData">
        <div class="parkData-title">园区数据</div>
        <div class="parkData-contents">
          <div class="parkData-content">
            <span>年度累计收费(元)</span>
            <p>{{ parkList.annualIncome }}</p>
          </div>
          <div class="parkData-content">
            <span>入驻企业总数(个)</span>
            <p>{{ parkList.enterpriseTotal }}</p>
          </div>
          <div class="parkData-content">
            <span>月卡车辆总数(辆)</span>
            <p>{{ parkList.monthCardTotal }}</p>
          </div>
          <div class="parkData-content">
            <span>一体杆总数(台)</span>
            <p>{{ parkList.chargePoleTotal }}</p>
          </div>
        </div>
      </div>
      <div class="inlet">
        <div class="inlet-title">快捷入口</div>
        <div class="inlet-content">
          <div class="inlet-content-data" @click="$router.push('/addenterprise')">
            <img src="@/assets/企业.png" alt="" />
            <p>添加企业</p>
          </div>
          <div class="inlet-content-data" @click="$router.push('/employee')">
            <img src="@/assets/员工.png" alt="" />
            <p>员工管理</p>
          </div>
          <div class="inlet-content-data" @click="showDialog=true">
            <img src="@/assets/账单.png" alt="" />
            <p>添加账单</p>
          </div>
          <div class="inlet-content-data">
            <img src="@/assets/大屏.png" alt="" />
            <p>数据大屏</p>
          </div>
        </div>
      </div>
    </div>
    <div class="b-content">
      <div class="statistics">
        <div class="statistics-title">年度输入统计</div>
      </div>
      <div class="dispatch">
        <div class="dispatch-title">设备告警派单</div>
        <div class="dispatch-content">
          <div class="img">
            <img src="@/assets/空.png" alt="" />
          </div>
          <a-button @click="$router.push('/warnList')"
            >更多
            <span>
              <svg
                t="1686471851712"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1410"
                width="10"
                height="10"
              >
                <path
                  d="M769.216 511.936c0-3.712-1.152-7.232-1.856-10.88-0.64-2.368-0.64-4.8-1.408-7.04a50.56 50.56 0 0 0-11.136-17.344l-417.28-417.28a48.96 48.96 0 0 0-68.992-0.96 48.832 48.832 0 0 0 1.024 68.864L654.208 512l-384.64 384.768a48.768 48.768 0 0 0-1.024 68.8 48.768 48.768 0 0 0 68.864-0.96l417.28-417.344a51.2 51.2 0 0 0 11.136-17.344c0.896-2.304 0.896-4.736 1.472-7.04 0.768-3.648 1.92-7.232 1.92-10.944z"
                  fill="#ffffff"
                  p-id="1411"
                ></path>
              </svg>
            </span>
          </a-button>
        </div>
      </div>
    </div>
    <div class="f-content">
      <div class="f-content-title">临期合同提醒</div>
      <a-table
        v-if="dataSource.length"
        :data-source="dataSource"
        :columns="columns"
        :pagination="false"
      >
        <template #bodyCell="{ column, record, index }">
          <div v-if="column.dataIndex === 'startTime'">
            {{ record.startTime }} ~ {{ record.endTime }}
          </div>
          <div v-if="column.dataIndex === 'index'">
            {{ (listForm.page - 1) * listForm.pageSize + index + 1 }}
          </div>
          <div v-if="column.dataIndex === 'action'">
            <span class="span">续签</span>
            <span class="span" @click="rentingOut(record.id)">退租</span>
          </div>
        </template>
      </a-table>
      <div v-else style="text-align: center; margin-top: 20px">
        <img src="@/assets/空.png" />
      </div>
      <!-- 分页---------- -->
      <div class="pagination">
        <a-config-provider :locale="zh_CN">
          <a-pagination
            size="small"
            v-model:current="listForm.page"
            v-model:page-size="listForm.pageSize"
            :pageSizeOptions="['10', '20', '30', '40', '50']"
            :total="total"
            :show-total="(total) => `共 ${total} 条`"
            show-size-changer
            show-size-change
            @Change="onChange"
          >
          </a-pagination>
        </a-config-provider>
      </div>
    </div>
    <addBill v-model:showDialog="showDialog"></addBill>
  </div>
</template>
<style lang="scss" scoped>
.content {
  margin: 20px;
  .t-content {
    display: flex;
    margin-bottom: 20px;
    .parkData {
      flex: 2.5;
      padding: 20px 20px 0 20px;
      min-width: 260px;
      background-color: #fff;
      .parkData-contents {
        display: flex;
        justify-content: space-between;
        padding-top: 20px;
        color: #909399;
        p {
          margin-top: 10px;
          color: #303035;
          font-size: 20px;
          font-weight: 700;
        }
      }
    }
    .inlet {
      flex: 1;
      margin-left: 20px;
      padding: 20px 20px 0 20px;
      background-color: #fff;
      .inlet-content {
        display: flex;
        justify-content: space-between;
      }
      .inlet-content-data {
        margin-top: 20px;
        display: flex; /* 子元素同时也设置为 flex 布局 */
        flex-direction: column; /* 子元素中的元素纵向排列 */
        cursor: pointer;
        img {
          width: 44px;
          height: 44px;
          margin-left: 5px;
        }
        p {
          margin-top: 5px;
        }
      }
    }
  }
  .b-content {
    display: flex;
    margin-bottom: 20px;
    .statistics {
      flex: 2.5;
      min-width: 260px;
      padding: 20px 20px 0 20px;
      background-color: #fff;
    }
    .dispatch {
      flex: 1;
      margin-left: 20px;
      padding: 20px 20px 0 20px;
      background-color: #fff;
      .dispatch-content {
        display: flex;
        text-align: center;
        flex-direction: column;
        img {
          width: 160px;
          height: 160px;
        }
        .ant-btn {
          height: 36px;
          width: 100%;
          color: #fff;
          margin-bottom: 30px;
          border-radius: 50px;
          background-color: #4770ff;
          span {
            margin-left: 10px;
          }
        }
      }
    }
  }
  .f-content {
    width: 760px;
    background-color: #fff;
    min-width: 260px;
    padding: 20px;
    .f-content-title {
      margin-bottom: 20px;
    }
    .span {
      margin-right: 10px;
      color: #4770ff;
      cursor: pointer;
    }
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-right: 50px;
      margin-top: 20px;
    }
  }
}
</style>
